<!--
 * @Author: quit
 * @Date: 2021-11-15 04:59:32
 * @LastEditTime: 2021-11-17 11:32:25
 * @Descripttion: 全屏插件组件
-->
<template>
  <div><svg-icon class="icon" :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" @click="changeScreen" /></div>
</template>

<script>
export default {
  data() {
    return {
      isFullscreen: false
    }
  },
  // 方法集合
  methods: {
    changeScreen() {
      this.clickFullscreen()
    },
    // 全屏
    clickFullscreen() {
      const element = document.documentElement
      if (this.isFullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen()
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen()
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen()
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen()
        }
      }
      this.isFullscreen = !this.isFullscreen
    }
  }
}
</script>
<style lang="scss" scoped>
.icon {
  color: #5a5e66;
}
</style>
